/**
 * 培训监控
 */
<template>
    <vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="xm">
							<template #label><vp-label  zh="人员" en="Person" /></template>
							<el-input v-model="searchForm.xm" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="gw">
							<template #label><vp-label zh="岗位" en="Post"/></template>
							<el-input v-model="searchForm.gw" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="kcmc">
							<template #label><vp-label zh="课程" en="Course"/></template>
							<el-input v-model="searchForm.kcmc" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="rq">
							<template #label><vp-label zh="有效期" en="Course Time"/></template>
							<el-date-picker
								v-model="searchForm.rq"
								type="daterange"
								start-placeholder="开始日期/Start Date"
								end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD"
								unlink-panels
								range-separator="-"
								style="width: 100%"
							>
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item :label-width="120" prop="yjbs">
							<el-checkbox v-model="searchForm.yjbs" :true-value="1" :false-value="0">
								<vp-label zh="仅看预警数据" en="Only Warning Data"/>
							</el-checkbox>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #table>
			<vp-vxe-table 
				id="trainingMonitorTable"
				ref="tableRef" 
				:data="tableData" 
				@sort-change="handleSortChange" 
				:row-class-name="tableRowClassName" 
				row-key="id" 
				v-loading="loading"
			>
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column 
					field="xm" 
					title="人员 Person"
					show-overflow
					:width="80"
				>
					<template #header><vp-label zh="人员" en="Person"/></template>
					<template #default="scope">
						<el-link @click="viewPersonFile(scope.row.daid)"><span v-html="markTextColor(searchForm.xm, scope.row.xm)"/></el-link>
					</template>
				</vxe-column >
				<vxe-column 
					field="gwbh" 
					title="岗位 Post"
					show-overflow
					:min-width="150"
				>
					<template #header><vp-label zh="岗位" en="Post"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.gw, (scope.row.gwbh || '') + (scope.row.gwmc || ''))"/>
					</template>
				</vxe-column >
				<vxe-column 
					field="kcbh" 
					title="课程编号 Course No."
					sortable
					show-overflow
					:min-width="100"
					>
					<template #header><vp-label zh="课程编号" en="Course No."/></template>
					<template #default="scope">
						<el-link @click="viewCourse(scope.row.kcid)"><span v-html="markTextColor(searchForm.kcmc, scope.row.kcbh)"/></el-link>
					</template>
				</vxe-column >
				<vxe-column  
					field="kcmc_zw" 
					title="课程名称 Course Name"
					sortable 
					show-overflow
					:min-width="150"
				>
					<template #header><vp-label zh="课程名称" en="Course Name"/></template>
					<template #default="scope">
						<span>{{(scope.row.kcmcZw || '') + (scope.row.kcmcYw || '') }}</span>
					</template>
				</vxe-column >
				<vxe-column 
					field="jx" 
					title="适用机型 A/C Type"
					show-overflow 
					:min-width="100"
				>
					<template #header><vp-label zh="适用机型" en="A/C Type"/></template>
				</vxe-column>
				<vxe-column  
					field="scpxrq" 
					title="上次培训日期 Last Training Date"
					sortable 
					show-overflow
					:width="150"
				>
					<template #header><vp-label zh="上次培训日期" en="Last Training Date"/></template>
				</vxe-column >
				<vxe-column   
					field="pxfs" 
					title="复训周期 Retraining Cycle"
					show-overflow
					:width="120"
				>
					<template #header><vp-label zh="复训周期" en="Retraining Cycle"/></template>
					<template #default="scope" >
						{{ (scope.row.zqz + (scope.row.zqdw == 12 ? 'M' : scope.row.zqdw == 11 ? 'D' : '') )}}
					</template>
				</vxe-column >
				<vxe-column 
					field="yxq" 
					title="有效期 Expiry Date"
					sortable
					show-overflow
					:width="120" 
					align="center"
				>
					<template #header><vp-label zh="有效期" en="Expiry Date"/></template>
					<template #default="scope">
						{{ scope.row.yxq }}
					</template>
				</vxe-column >
				<vxe-column 
					field="syts" 
					title="剩余天数 Remaining Days"
					sortable
					show-overflow
					:width="140" 
					align="center"
				>
					<template #header><vp-label zh="剩余天数" en="Remaining Days"/></template>
					<template #default="scope">
						{{ scope.row.syts }}
					</template>
				</vxe-column >
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
	</vp-main-page>
</template>

<script setup lang="ts" name="trainingMonitor">
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import router from '/@/router';
import commonFunction from '/@/utils/commonFunction';
import { DEFAULT_PAGE } from '/@/utils/page';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';


	const searchForm = reactive({
		gw: "",
		kcmc: "",
		xm: "",
		yjbs: 0,
		rq: [],
	});
	
	const page = reactive({
		...DEFAULT_PAGE,
	})

	const showMore = ref(false);
	const loading = ref(false);
	const tableData = ref([]);

	// 加载列表数据
	const loadDataList = () => {
		loading.value = true
		request.get('/training/monitoring/list', {
			params: {
				...searchForm,
				...page,
			}
		}).then(res => {
			tableData.value = res?.data?.list || []
			page.total = res?.data?.total || 0
			page.pageNum = res?.data?.pageNum || 1
		}).finally(()=>{
			loading.value = false
		})
	}

	const searchFormRef = ref();

	// 重置搜索条件
	const handleSearchReset = ()=>{
		searchFormRef.value.resetFields();
	}

	// 列表字段排序
	const handleSortChange = (column: any)=>{
		page.sortColumn = column.field;
		page.sortOrder = column.order;
		loadDataList()
	}

	// 组件挂载后事件
	onMounted(() => {
		// 从首页预警跳转进来，则默认勾选预警查询条件
		const route = useRoute();
		if (route.query && route.query.yjbs) {
			searchForm.yjbs = parseInt(route.query.yjbs as string);
		}
		loadDataList();
		// 加载预警值
		getThreshold("TRAINING_RETRAINING_MONITORING").then((res)=>{
			threshold.value = res?.data || {};
		})
	})

	const {getThreshold} = commonFunction();
	const threshold = ref({ 
		key: '',
		yjtsJb1: '',
		yjtsJb2: '',
	});

	// 对预警数据标记
	const tableRowClassName = ({row}: {row: any})=>{
		if(!threshold.value.key){
			return;
		}
		if(row.syts || row.syts === 0){
			if(threshold.value.yjtsJb1 >=  row.syts){
				return "row-warning1"
			}
			if(threshold.value.yjtsJb2 >=  row.syts){
				return "row-warning2"
			}
		}
	}

	const viewPersonFile = (jydaid: string) =>{
		router.push({
			name: "viewTrainingPersonnelFile",
			params: {
				id: jydaid,
			},
		})
	}

	const viewCourse = (kcid: string) =>{
		router.push({
			name: "viewTrainingCourse",
			params: {
				id: kcid,
			},
		})
	}


	const tableRef = ref();

</script>

<style lang="scss" scoped>

</style>